<template>
  <div :class="{pt: scrollY && isShowHeader}" class='main'>
    <div v-if="scrollY && isShowHeader" class="header">
      <tab-custom-3
        v-if="dataItems && dataItems.length"
        :labelList='dataItems'
        :activeLabelId="activeLabelId"
        @change='changeCustomTab'>
      </tab-custom-3>
    </div>
    <div class="wrapper" ref="wrapper">
      <div class="cont">
        <div class="meet-baseinfo">
          <div :style="{backgroundImage: `url(${meetingInfo.coverImg})`}" class="cover">
          </div>
          <div class="baseinfo">
            <p class="title">{{meetingInfo.meetingName}}</p>
            <p class="browse-apply"><span>浏览 {{meetingInfo.browseNum || 0}}</span><span class="apply-num">已报名 {{meetingInfo.signNum || 0}}</span><span @click="showShareGuide = true" class="icon-share"></span></p>
          </div>
        </div>
        <ul class="info-list">
          <li @click="handleJump('loaction')" class="info-item">
            <p><span class="icon"></span><span class="text">{{meetingInfo.meetingTime}}</span></p>
          </li>
          <li @click="handleJump('loaction')" class="info-item">
            <p><span class="icon"></span><span class="text">{{meetingInfo.address}}</span></p>
          </li>
          <li @click="handleJump('apply')" class="info-item">
            <p><span class="icon"></span><span class="text">门票</span></p>
            <p class="type">{{meetingInfo.ticketType ? '收费': '免费'}}</p>
          </li>
        </ul>
        <div v-if="meetingInfo.introduce" ref="introduce" class="introduce meet-item">
          <div class="title-more">
            <span class="header-title">会议介绍</span>
          </div>
          <div v-html="meetingInfo.introduce" class="introduce-cont editor-content"></div>
        </div>
        <div v-if="offlineAgendas && offlineAgendas.length" ref="agenda" class="agenda meet-item">
          <div class="title-more">
            <span class="header-title">会议议程</span>
          </div>
          <div class="agenda-info">
            <ul class="agenda-list">
              <li v-for="(agenda, i) in offlineAgendas" :key="i" class="agenda-item">
                <p class="time">{{agenda.agendaTime}}</p>
                <p class="name">{{agenda.agendaDesc}}</p>
                <p class="descript">{{agenda.agendaDetail}}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div v-if="meetingInfo.organizers && meetingInfo.organizers.length" ref="organization" class="organization meet-item">
          <div class="title-more">
            <span class="header-title">会议组织</span>
          </div>
          <ul class="org-list">
            <li v-for="(org,i) in meetingInfo.organizers" :key="i" class="org-item">
              <div class="title">{{org.organizerType | handleOrgType}}</div>
              <div class="org-info">
                <p class="logo">
                  <img v-if="org.organizerLogo" :src="org.organizerLogo" alt="">
                  <img v-else src="../../assets/img/logo@2x.png" alt="">
                </p>
                <p class="name">{{org.organizer}}</p>
              </div>
            </li>
          </ul>
        </div> -->
        <div v-if="meetingInfo.organizer" ref="organization" class="organization meet-item">
          <div class="title-more">
            <span class="header-title">会议组织</span>
          </div>
          <ul class="org-list">
            <li class="org-item">
              <div class="title">主办方</div>
              <div class="org-info">
                <p class="logo">
                  <img v-if="meetingInfo.organizerLogo" :src="org.organizerLogo" alt="">
                  <img v-else src="../../assets/img/logo@2x.png" alt="">
                </p>
                <p class="name">{{meetingInfo.organizer}}</p>
              </div>
            </li>
          </ul>
        </div>
        <div v-if="meetingInfo.meetingNotice" ref="notice" class="introduce notice meet-item">
          <div class="title-more">
            <span class="header-title">会议须知</span>
          </div>
          <div class="introduce-cont">{{meetingInfo.meetingNotice}}</div>
        </div>
        <div v-if="meetingInfo.enableMeetingGuide" ref="guide" class="introduce meet-item">
          <div class="title-more">
            <span class="header-title">会议指引</span>
          </div>
          <div v-html="meetingInfo.meetingGuide" class="introduce-cont editor-content"></div>
        </div>
        <div v-if="meetingInfo.contacts && meetingInfo.contacts.length" class="contact-us">
          <div class="title-more">
            <span class="header-title">联系我们</span>
          </div>
          <ul class="contact-list">
            <li v-show="contact.wayType <= 2" v-for="(contact, i) in meetingInfo.contacts" :key="i" class="contact-item">
              <p :class="handleClass(contact.wayType)" class="icon"></p>
              <p class="label">{{contact.wayType | handleWayType}}</p>
              <p class="text">{{contact.contactWay}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div @click="showShareGuide = true" class="share">
        <p class="icon"></p>
        <p class="label">分享</p>
      </div>
      <div class="button">
        <p @click="handleCancleApply()" v-if="userInfo.apply" class="btn disable">取消报名</p>
        <!-- <p v-if="meetingInfo.isApply" class="btn again">再次报名</p> -->
        <p v-if="userInfo.apply" @click="handleJump('center')" class="btn">我的门票</p>
        <p v-if="!userInfo.apply" @click="handleJump('apply')" class="btn">立即报名</p>
      </div>
    </div>
    <!-- 分享引导 -->
    <transition name='fade'>
      <div class='body-share-wrapper' v-show='showShareGuide' @click='hideShareGuide'>
        <div class='body-share-arrow'></div>
        <div class='body-share-panel'>
          <div class='panel-title'>点击右上角分享此页</div>
          <div class='panel-content'>
            <div class='panel-content-item left'>
              <div class='item-icon'></div>
              <div class='item-text'>发送给朋友</div>
            </div>
            <div class='panel-content-item right'>
              <div class='item-icon'></div>
              <div class='item-text'>发送到朋友圈</div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 关注二维码 -->
    <subscribe-qrcode
      v-if='showMpCode'
      @close='closeCode'>
    </subscribe-qrcode>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import tabCustom3 from '../../components/tab/tab-custom-3'
import subscribeQrcode from '@/components/subscribe-qrcode'
export default {
  name: 'Home',
  components: {
    tabCustom3,
    subscribeQrcode
  },
  data () {
    return {
      showMpCode: false,
      meetingId: this.$route.query.meetingId || '',
      meetingInfo: {
        coverImg: '',
        meetingName: '',
        signNum: 0,
        meetingTime: '',
        address: '',
        ticketType: 1,
        introduce: ``,
        organizers: [],
        meetingNotice: '',
        enableMeetingGuide: true,
        meetingGuide: ``,
        contacts: []
      }, // 会议详情
      offlineAgendas: [], // 议程
      userInfo: {}, // 用户报名信息
      scroll: null,
      scrollY: 0,
      activeLabelId: 'introduce',
      listHeight: [],
      dataItems: [
        {
          labelId: 'introduce',
          labelName: '会议介绍'
        },
        {
          labelId: 'agenda',
          labelName: '会议议程'
        },
        {
          labelId: 'organization',
          labelName: '会议组织'
        },
        {
          labelId: 'notice',
          labelName: '会议须知'
        },
        {
          labelId: 'guide',
          labelName: '会议指引'
        }
      ],
      // 分享
      showShareGuide: false
    }
  },
  computed: {
    // 根据滚动距离控制tababr的显示
    isShowHeader () {
      let height1 = document.getElementsByClassName('meet-baseinfo') ? document.getElementsByClassName('meet-baseinfo')[0].clientHeight : 0
      let height2 = document.getElementsByClassName('info-list') ? document.getElementsByClassName('info-list')[0].clientHeight : 0
      if (this.scrollY > height1 + height2 + 20) {
        return true
      } else {
        return false
      }
    },
    // 根据滚动距离控制tababr的选中
    currentIndex () {
      let h1 = document.getElementsByClassName('meet-baseinfo') && document.getElementsByClassName('meet-baseinfo').length ? document.getElementsByClassName('meet-baseinfo')[0].clientHeight : 0
      let h2 = document.getElementsByClassName('info-list') && document.getElementsByClassName('info-list').length ? document.getElementsByClassName('info-list')[0].clientHeight : 0
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i + 1]
        if ((this.scrollY > h1 + h2 && !height2) || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i
        }
      }
      return 0
    }
  },
  methods: {
    // 获取会议详情
    fetchMeetingInfo () {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/offline/${this.meetingId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
            if (!data.enableMeetingGuide) {
              this.dataItems.splice(4, 1)
            }
            if (Number(data.meetingType) === 2 && data.offlineAgendas) {
              this.offlineAgendas = data.offlineAgendas
            }
            // 设置分享
            this.setWxToolMenuAndShare({
              showAllMenu: false,
              shareInfo: {
                title: data.meetingName,
                imgUrl: data.coverImg,
                desc: data.meetingName,
                link: `${location.origin}${this.BASE_URL}${this.VERSION}/home?meetingId=${this.meetingId}`
              }
            })
            this.$nextTick(() => {
              this.calculateHeight()
            })
          }
        }
      })
    },
    // 获取是否报名
    getUserInfo () {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/offline/${this.meetingId}/${sessionStorage.getItem('openid')}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.userInfo = data
          }
        }
      })
    },
    // 取消报名
    handleCancleApply () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/${sessionStorage.getItem('openid')}/${this.meetingId}/apply`
      let params = {
        name: this.userInfo.name,
        phone: this.userInfo.phone,
        operation: false
      }
      this.$post(url, params).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$toast(res.message)
          this.fetchMeetingInfo()
          this.getUserInfo()
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 埋点
    actionTrack () {
      let url = `${this.SERVICE_PORTAL}/meeting/${this.meetingId}/track`
      this.$get(url).then(res => {
        if (res.code === 200) {
          console.log('埋点成功')
        }
      })
    },
    // 初始化scroll
    initScroll () {
      if (!this.$refs.wrapper) {
        return
      }
      // better-scroll的初始化
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: 3, // 监测实时滚动的位置
        click: true,
        scrollX: false,
        useTransition: false,
        preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ },
        bounce: false,
        preventDefault: true,
        swipeTime: 1000
      })

      this.scroll.on('scroll', (pos) => {
        // 拿到实时的y坐标
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    // 记录高度
    calculateHeight () {
      let height1 = document.getElementsByClassName('meet-baseinfo') ? document.getElementsByClassName('meet-baseinfo')[0].clientHeight : 0
      let height2 = document.getElementsByClassName('info-list') ? document.getElementsByClassName('info-list')[0].clientHeight : 0
      let meetingList = this.$refs.wrapper.getElementsByClassName('meet-item')
      let height = height1 + height2
      this.listHeight.push(height)
      for (let i = 0; i < meetingList.length; i++) {
        let item = meetingList[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    },
    changeCustomTab (refDom) {
      this.scroll && this.scroll.scrollToElement(this.$refs[refDom], 300)
    },
    handleClass (type) {
      switch (Number(type)) {
        case 1:
          return 'mobile'
        case 2:
          return 'email'
      }
    },
    handleJump (name) {
      switch (name) {
        case 'loaction':
          let longitude = this.meetingInfo.longitude
          let latitude = this.meetingInfo.latitude
          this.linkTo('meetingLocation', {}, { meetingId: this.meetingId, longitude: longitude, latitude: latitude })
          break
        case 'apply':
          // 判断用户是否关注公众号
          if (this.checkIfSubscribe() !== 1) {
            this.showCode()
            return false
          }
          this.linkTo('meetingApply', {}, { meetingId: this.meetingId })
          break
        case 'center':
          this.linkTo('meetingPersonCenter')
          break
      }
    },
    showCode () {
      this.showMpCode = true
    },
    closeCode () {
      this.showMpCode = false
    },
    hideShareGuide () {
      this.showShareGuide = false
    }
  },
  filters: {
    // 组织类型
    handleOrgType (type) {
      switch (Number(type)) {
        case 1:
          return '主办方'
        case 2:
          return '协办方'
        case 3:
          return '合作方'
      }
    },
    // 联系方式
    handleWayType (type) {
      switch (type) {
        case 1:
          return '电话'
        case 2:
          return '邮箱'
        case 3:
          return '地址'
        case 4:
          return '官网'
      }
    }
  },
  watch: {
    currentIndex (val) {
      this.activeLabelId = this.dataItems[val].labelId
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  created () {
    this.fetchMeetingInfo()
    this.getUserInfo()
    this.actionTrack()
  }
}
</script>

<style lang="stylus" scoped>
.main
  width 100%
  height 100vh
  overflow-y auto
  background rgb(249,250,251)
  padding 0 0 50px
  &.pt
    padding-top 60px
  /* 公共样式 */
  .title-more
    display flex
    justify-content space-between
    box-sizing border-box
    padding 0 15px
    align-items center
    .header-title
      display block
      color #202125
      font-size 14px
      font-weight 700
      flex 1
      width 0
      line-height 20px
      padding-left 18px
      nowrap()
      background url('~assets/img/title-icon-blue.png') no-repeat left 0 center / auto 14px
    .more-title
      flex-shrink 0
      color rgba(14, 191, 178, 1)
      font-size 14px
      line-height 20px
      font-weight 700
  .header
    width 100%
    height 60px
    background #fff
    position fixed
    left 50%
    top 0
    transform translate(-50%, 0)
    z-index 999
  .wrapper
    height 100%
    .cont
      width 100%
      padding-bottom 15px
      .meet-baseinfo
        width 100%
        background #fff
        .cover
          width 100%
          height 160px
          background-size cover
          background-position center
          background-repeat no-repeat
        .baseinfo
          width 100%
          padding 15px
          .title
            width 100%
            max-height 42px
            line-height 21px
            font-size 17px
            font-weight 700
            color #464646
          .browse-apply
            height 18px
            line-height 18px
            font-size 13px
            color #848484
            margin-top 15px
            .apply-num
              margin-left 35px
            .icon-share
              display inline-block
              width 16px
              height 16px
              background url('../../assets/img/icon_share@2x.png') no-repeat center/100%
              float right
      .info-list
        width 100%
        margin-top 20px
        .info-item
          width 100%
          height 50px
          background #fff
          display flex
          justify-content space-between
          align-items center
          padding 0 15px 0 20px
          box-sizing border-box
          .icon
            position absolute
            top 50%
            left 0
            transform translate(0, -50%)
          &:first-of-type
            margin-bottom 1px
            .icon
              background-image url('../../assets/img/icon_time@2x.png')
              background-size 16px 16px
          &:last-of-type
            margin-top 10px
            .icon
              background-image url('../../assets/img/icon_ticket@2x.png')
              background-size 16px 14px
          p
            position relative
            padding 0 0 0 32px
            box-sizing border-box
            span
              vertical-align middle
            .icon
              display inline-block
              width 16px
              height 16px
              background-size 14px 16px
              background-position center
              background-repeat no-repeat
              background-image url('../../assets/img/icon_address_s@2x.png')
            .text
              // height 21px
              line-height 21px
              font-size 17px
              // font-weight 700
              color #464646
              // margin-left 17px
          .type
            height 21px
            line-height 21px
            font-size 15px
            color #0EBFB2
      .introduce
        width 100%
        background #fff
        padding-top 20px
        margin-top 10px
        .introduce-cont
          width 100%
          line-height 21px
          font-size 15px
          color #464646
          padding 15px 15px 23px
          white-space pre-wrap
      .agenda
        width 100%
        background #fff
        padding-top 20px
        margin-top 10px
        .agenda-info
          width 100%
          padding 26px 15px 30px
          .agenda-list
            width 100%
            .agenda-item
              width 100%
              & + .agenda-item
                margin-top 33px
              .time,.name
                height 21px
                line-height 21px
                font-size 15px
                color #464646
              .name
                margin-top 15px
              .descript
                height 18px
                line-height 18px
                font-size 13px
                color #b2b2b2
                margin-top 15px
      .organization
        width 100%
        background #fff
        padding-top 20px
        margin-top 10px
        .org-list
          width 100%
          padding 26px 15px
          .org-item
            width 100%
            & + .org-item
              margin-top 33px
            .title
              height 21px
              line-height 21px
              font-size 15px
              color #b2b2b2
            .org-info
              width 100%
              margin-top 15px
              display flex
              align-items center
              .logo
                width 44px
                height 44px
                border-radius 50%
                // border 1px solid #e0e0e0
                img
                  width 100%
                  height 100%
              .name
                height 24px
                line-height 24px
                font-size 17px
                color #464646
                margin-left 15px
      .contact-us
        width 100%
        background #fff
        padding-top 20px
        margin-top 10px
        .contact-list
          width 100%
          padding 20px 15px
          .contact-item
            width 100%
            display flex
            align-items center
            & + .contact-item
              margin-top 23px
            .icon
              width 16px
              height 16px
              background-repeat no-repeat
              background-position center
              &.mobile
                background-image url('../../assets/img/icon_mobile.png')
                background-size 13px 15px
              &.email
                background-image url('../../assets/img/icon_email@2x.png')
                background-size 16px 14px
            .label
              height 21px
              line-height 21px
              font-size 15px
              color #848484
              margin-left 15px
            .text
              height 21px
              line-height 21px
              font-size 15px
              color #464646
              margin-left 25px
  .footer
    width 100%
    height 50px
    background #fff
    border-top 1px solid #E0E0E0
    display flex
    justify-content space-between
    align-items center
    padding 0 15px 0 26px
    position fixed
    left 50%
    bottom 0
    transform translate(-50%, 0)
    z-index 99
    .share
      display flex
      align-items center
      .icon
        width 16px
        height 16px
        background url('../../assets/img/icon_share@2x.png') no-repeat center/100%
      .label
        line-height 14px
        font-size 13px
        color #8E8E8E
        margin-left 5px
        padding-top 2px
    .button
      display flex
      align-items center
      .btn
        width 100px
        height 30px
        background #3DB5FF
        line-height 30px
        text-align center
        border-radius 15px
        font-size 15px
        color #fff
        margin 0
        &.again
          background #0EBFB2
          margin-right 10px
        &.disable
          background #8e8e8e
          margin-right 10px
  .body-share-wrapper
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0, 0, 0, 0.25)
    z-index 100
    .body-share-arrow
      position absolute
      top 29px
      right 66px
      width 46px
      height 137px
      background url('~assets/img/icon_share_3.png') no-repeat 0 0 / 46px 137px
    .body-share-panel
      position absolute
      left 66px
      right 66px
      top 180px
      background rgba(255, 255, 255, 0.97)
      border-radius 10px
      padding 26px 0 22px
      .panel-title
        height 20px
        font-size 14px
        font-weight 600
        color #333333
        line-height 20px
        text-align center
        margin-bottom 16px
      .panel-content
        display flex
        justify-content center
        .panel-content-item
          &.left
            margin-right 30px
            .item-icon
              background #fff url('~assets/img/icon_share_2.png') no-repeat center / 20px auto
          &.right
            .item-icon
              background #fff url('~assets/img/icon_share_1.png') no-repeat center / 26px auto
          .item-icon
            width 60px
            height 60px
            background-color #fff
            margin-bottom 10px
          .item-text
            height 14px
            font-size 10px
            font-weight 400
            color rgba(51, 51, 51, 0.8)
            line-height 14px
            text-align center
</style>
